<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		a{
			display: inline-block;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			background-color: pink;
			margin-left: 5px;
		}
	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
	  <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
 </div>
 <input type="text" name="" id="index" value=""/>
</div>
<script>
	/**
	 * 3.在点击事件中取到索引
	 * 方法一：添加自定义属性
	 */
	 var vm = new Vue({
		  el: 'body',
		  data: {
		  items: [
			   { text: '巴士' },
			   { text: '快车' },
			   { text: '专车' },
			   { text: '顺风车' },
			   { text: '出租车' },
			   { text: '代驾' }
		  ]
		  },
		  methods: {
			  onclick:function(event){
			   event.preventDefault();
			   let target = event.target;
			   console.log(target);//获取点击的元素
			   console.log(target.getAttribute("data-index"));
			   document.getElementById('index').value = target.getAttribute("data-index");
			  }
  		  }
 	})
</script>	
</body>
</html>